<template>
  <a-spin :spinning="spinning" tip="加载中...">
  <a-card :bordered="false">
    <h3>{{id == 'null' ? '新增' : '编辑'}}消息类型</h3>
    <a-form-model
      ref="rulesForm"
      :model="form"
      :rules="rules"
      :labelCol="{ lg: { span: 6 }, sm: { span: 8 } }"
      :wrapperCol="{ lg: { span: 14 }, sm: { span: 16 } }"
    >
      <a-form-model-item label="消息类型名称" prop="advicesName">
        <a-input
            v-model.trim="form.advicesName"
            :maxLength="24"
            placeholder=""
            allowClear
          />
          <div>限24个字符以内</div>
      </a-form-model-item>
      <a-form-model-item label="消息类型icon" required>
        <JImageUpload :isMove="false" :uploadParams="getUploadParams()"  :isMultiple="true" :fileSize="1" :number="1" :accept="'image/*'" @fileChange="fileImageChange" v-model="imageList"></JImageUpload>
        <div>120x120px，支持PNG, JPG和GIF格式，大小不超过1M</div>
      </a-form-model-item>
      <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
        <a-button style="margin-right: 8px" @click="handleBack">取消</a-button>
        <a-button htmlType="submit" @click="handleSubmit" type="primary" >保存</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
  </a-spin>
</template>
<script>
  import { advicesTypeAdd, advicesTypeEdit} from '@/api/micromall/communityMarketing'
  import JImageUpload from '../../components/JImageUpload'
  export default {
    components: {
      JImageUpload
    },
    data() {
      return {
        id: this.$route.params.id,
        imageList: [],
        spinning: false,
        form: {
          advicesName: ''
        },
        rules: {
          advicesName: [
            { required: true, message: '请输入', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.getDetails()
    },
    computed: {
    },
    mounted() {
    },
    beforeDestroy() {
    },
    methods: {
      // 获取详情
      getDetails() {
        if (this.$route.params.id == 'null') return
        const item = JSON.parse(decodeURIComponent(this.$route.query.item))
        const { image } = item
        this.form = {
          ...item
        }
        this.imageList = [image]
      },

      // 确认同步
      handleSubmit() {
        const advicesTypeAddOrEdit = this.id == 'null' ? advicesTypeAdd : advicesTypeEdit
        this.$refs.rulesForm.validate(valid => {
          if (valid) {
            const {image} = this.form
             if (!image) {
              this.$message.error('请上传消息类型icon！')
              return
            }
            const data = {
              ...this.form
            }
            this.spinning = true
            advicesTypeAddOrEdit(data).then(res => {
              if (res.code === 200) {
                this.$router.go(-1)
              } else {
                this.spinning = false
                this.$message.error(res.msg || res.message)
              }
            })
            .catch(err => {
              this.spinning = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },

      //返回
      handleBack() {
        this.$router.go(-1)
      },

      getUploadParams() {
        return {
            actionUrl: 'https://jic.jnby.com/activity/market-act/common/upload/multipart',
            headers: {
              authorization: 'authorization-text'
            },
            uploadHost: 'https://img.bzhz.jnbygroup.com/'
          }
      },
      // 图片change
      fileImageChange(list) {
        this.form.image = list.length ? list[0].url : ''
      }
    }
  }
</script>
<style lang="less" scoped>
  .hidden-title /deep/ .ant-form-item-label > label {
    visibility: hidden;
  }
</style>
